
<script lang="ts" setup>
    import CustomerService from '../../ai/customer-service.vue';
    
    const radio = ref('报修漏水问题');
    const character = ref('正常');
    const isshow = ref(false);
    const trainobj = ref({
        'request':'',
        'character':'',
    });
    let timeKey = Date.now()
    //点击开始训练函数 
    function onClickStart(data:any){
        // true 是开始训练 false 是从结束训练 是通过爷孙传过来的
        if (data) {
            trainobj.value.request = radio.value;
            trainobj.value.character = character.value;
        }else{
            trainobj.value.request = '';
            trainobj.value.character = '';
        } 
        isshow.value = data;
    }
    //孙子组件注入 结束训练
    provide('End_Start',onClickStart)
</script>

<!-- 客服示例 客服训练 -->
<template>
    <div class="w-full h-full pt-10">
        <div class="w-full h-full pt-10" v-show="!isshow">
            <section class="center-box rounded m-auto p-5">
                <div class="head-title text-2xl text-center pb-6 font-light">训练的要求</div>
                <div class="dashed px-8"></div>
                <div class="user-demand flex pt-2.5  items-baseline ml-16">
                    <div class="w-28 text-color">用户的需求 :</div>
                    <div class="ml-10">
                        <el-radio-group v-model="radio">
                            <el-radio :value="'报修漏水问题'">报修漏水问题</el-radio>
                            <el-radio :value="'报修水质问题'">报修水质问题</el-radio>
                            <el-radio :value="'投诉维修人员的服务态度差'">投诉维修人员的服务态度差</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <div class="user-demand flex pt-4.5  items-baseline ml-16">
                    <div class="w-28 text-color">用户个性特征 :</div>
                    <div class="ml-10">
                        <el-radio-group v-model="character">
                            <el-radio :value="'性格温和，说话很友好'">性格温和，说话很友好</el-radio>
                            <el-radio :value="'正常'">正常</el-radio>
                            <el-radio :value="'性格暴躁、挑剔、说话很不客气'">性格暴躁、挑剔、说话很不客气</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <div class="flex justify-center items-center pt-8 pb-4">
                    <el-button type="primary" size="large" class="w-47" @click="onClickStart(true)">开始训练</el-button>
                </div>
            </section>
        </div>
        <div class="w-full h-full" v-show="isshow">
            <CustomerService :key="timeKey" :trainobj="trainobj" :fromCaseInfoEnter="false" :sessionType="20" :auxiliaryanswer="false" :customertran="true" />
        </div>
    </div>
</template>


<style scoped>

.center-box{
    width: 642px;
    border: 2px dashed var(--el-border-color);
    box-shadow:0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
}
.center-box:hover{
    border-color: #409EFF;
} 
.head-title{
    color: #409EFF;
}
.text-color{
    color: #999;
    text-align: right;
}
.dashed{
    border-top: 1px solid var(--el-border-color);
}
.center-box /deep/ .el-radio-group{
    flex-direction: column;
    align-items: baseline
}
</style>